<template>
  <div class="app-container">
    <el-tabs type="border-card" v-model="activeName" @tab-click="clickTabs">
      <el-tab-pane lazy>
        <span slot="label"><i class="el-icon-s-tools"></i> 基础配置</span>
        <!--form-->
        <el-form ref="form" :model="baseConfig" label-width="80px">
          <el-form-item label="App名称" prop="configName">
            <el-input v-model="baseConfig.appName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="App版本" prop="configKey">
            <el-input v-model="baseConfig.version" placeholder="请输入" />
          </el-form-item>
        </el-form>
        <div class="text-center">
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
        <!--end-->
      </el-tab-pane>
      <el-tab-pane lazy>
        <span slot="label"><i class="el-icon-bank-card"></i> 支付配置</span>
        支付配置
      </el-tab-pane>
      <el-tab-pane lazy>
        <span slot="label"><i class="el-icon-upload"></i> 融云配置</span>
        融云配置
      </el-tab-pane>
      <el-tab-pane lazy>
        <span slot="label"><i class="el-icon-message"></i> 短信配置</span>
        短信配置
      </el-tab-pane>
      <el-tab-pane lazy>
        <span slot="label"><i class="el-icon-message"></i> 兑换配置</span>
        <el-form ref="form1" :rules="rules" :model="exchange" label-width="150px">
          <el-form-item label="usdt兑换cny比例" prop="usdt2Cny">
            <el-input v-model="exchange.usdt2Cny" placeholder="请输入usdt兑换cny比例" />
          </el-form-item>
        </el-form>
        <div class="text-center">
          <el-button type="primary" @click="submitExchange">确 定</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane lazy>
        <span slot="label"><i class="el-icon-message"></i> 充值凭证配置</span>
        充值凭证配置
        <el-form ref="form2" :rules="rules" :model="investData" label-width="150px">
          <el-form-item label="二维码" prop="picUrl">
            <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            list-type="picture-card"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handleChange"
            :before-upload="beforeUpload">
            <img v-if="investData.picUrl" :src="investData.picUrl" class="avatar" style="width:148px;height:148px">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          </el-form-item>
          <el-form-item label="url" prop="url">
            <el-input v-model="investData.url" placeholder="请输入url" />
          </el-form-item>
        </el-form> 
        <div class="text-center">
          <el-button type="primary" @click="submitinvestData">确 定</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import {getRecord,saveRecord ,qrCodeupload,qrCodeinfo } from "@/api/config";

  export default {
    name: "config",
    data(){
      const ValidFirmArea = (rule, value, callback) => {
            // console.log(typeof value);
            if (value == 0) {
              callback(new Error("办公面积不能为空或0"));
            } else if (value < 0) {
              callback(new Error("输入不能为负数"));
            } else {
              value = Number(value);
              if (isNaN(value)) {
                callback(new Error("输入必须为纯数字"));
              }
              callback();
            }
          };
      return {
        investData:{},
        uploadUrl:"",
        activeName:"0",
        baseConfig:{
          appName:"拓聊",
          version:"1.0.0",
        },
        exchange:{
          usdt2Cny:null
        },

        rules:{
          usdt2Cny: [{
            validator:ValidFirmArea,
            required: true,
            message: '请输入对比比例数字',
            trigger: 'blur'
          }],
        },
        rules:{}
      }
    },
    created(){
      this.chooseTab(this.activeName)
      this.getExchange()
      this.investInfo()
    },
    methods: {
      submitinvestData(){
        const that=this
        this.$refs.form2.validate(valid => {
            if (!valid) return
            let formData = new FormData();
            formData.append("file", that.investData.file.raw);
            formData.append("url", that.investData.url);
              qrCodeupload(formData).then(response=>{
                if(response.code == 200){
                  this.$alert("添加成功") 
                  this.investData.picUrl=response.fileName
                  console.log(that.investData,"that.investData")
                }else{
                  this.$alert(response.msg)
                }
              });
          })
      },
      investInfo(){
        qrCodeinfo().then(response=>{
            if(response.code == 200){
              this.investData=response.data
            }else{
              this.$alert(response.msg)
            }
          });
      },
      
      handleChange(file, fileList) {
      // 文件选择后的回调，可以在这里处理文件
      this.investData.file=file
      this.investData.picUrl=URL.createObjectURL(file.raw)
    },
    beforeUpload(file) {
      // 上传文件前的回调，返回false会停止上传
      const isJPG = file.type === 'image/jpeg';
      const isLT2M = file.size / 1024 / 1024 < 2;
 
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLT2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLT2M;
    },
      clickTabs(tab, event){
        this.chooseTab(this.activeName)
      },
      chooseTab(num){
        if(num === "0"){
          console.log("基础设置");
        }else if(num === '1'){
          console.log("支付配置");
        }else if(num === '2'){
          console.log("融云配置");
        }else if(num === '3'){
          console.log("短信配置");
        }
      },
      submitForm(){
        const num = this.activeName;
        if(num === "0"){
          console.log("提交基础设置");
        }else if(num === '1'){
          console.log("提交支付配置");
        }else if(num === '2'){
          console.log("提交融云配置");
        }else if(num === '3'){
          console.log("提交短信配置");
        }
      },
      getExchange(){
        getRecord().then(response=>{
          if(response.data !=null){
             this.exchange=response.data
          }

        });
      },
      submitExchange(){
          this.$refs.form1.validate(valid => {
            if (!valid) return
              saveRecord(this.exchange).then(response=>{
                if(response.code == 200){
                  this.$alert("添加成功")
                }else{
                  this.$alert(response.msg)
                }
              });
          })
      }
    }
  }
</script>

<style scoped>

</style>
